/**
 * 中华非遗导航栏组件
 * 可复用的顶部导航栏组件
 * 
 * @author 中华非遗团队
 * @version 1.1.0
 * @date 2024
 */

/**
 * 导航栏组件类
 */
class NavbarComponent {
    constructor(options = {}) {
        // 默认配置
        this.config = {
            // 网站基本信息
            siteName: '非遗索思',
            logoImage: 'img/logo.jpg', // 修改为使用图片文件
            logoIcon: 'fas fa-seedling', // 保留备用图标
            logoLink: 'index.html',
            
            // 导航菜单项
            menuItems: [
                { name: '首页', link: 'index.html', id: 'home' },
                { name: '认识非遗', link: 'about.html', id: 'about' },
                { name: '走近非遗', link: 'explore.html', id: 'explore' },
                { name: '传习非遗', link: 'heritage.html', id: 'heritage' },
                { name: '个人中心', link: 'profile.html', id: 'profile' }
            ],
            
            // 当前活动页面（初始化时不设置任何活动状态）
            activePage: null,
            
            // 容器ID
            containerId: 'navbar-container',
            
            // 自定义样式类
            customClass: '',
            
            // 主题类
            themeClass: 'theme-default',
            
            ...options
        };
        
        this.isInitialized = false;
    }

    /**
     * 生成导航栏HTML
     * @returns {string} 导航栏的HTML字符串
     */
    generateHTML() {
        const { siteName, logoImage, logoIcon, logoLink, menuItems } = this.config;
        
        // 生成菜单HTML，不预设任何活动状态
        const menuHTML = menuItems.map(item => {
            return `<li><a href="${item.link}" class="nav-link">${item.name}</a></li>`;
        }).join('');

        return `
            <header class="main-header">
                <nav class="nav-container">
                    <!-- 网站Logo -->
                    <a href="${logoLink}" class="logo">
                        <img src="${logoImage}" alt="${siteName} Logo" class="logo-image" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-block';">
                        <i class="${logoIcon}" style="display: none;"></i>
                        <span>${siteName}</span>
                    </a>
                    
                    <!-- 主导航菜单 -->
                    <ul class="nav-menu" id="navMenu">
                        ${menuHTML}
                    </ul>
                    
                    <!-- 移动端菜单按钮 -->
                    <div class="hamburger" id="hamburger">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </nav>
            </header>
        `;
    }

    /**
     * 渲染导航栏到指定容器
     * @param {string} containerId - 容器ID
     */
    render(containerId = null) {
        const targetId = containerId || this.config.containerId;
        const container = document.getElementById(targetId);
        
        if (!container) {
            console.error(`导航栏容器 #${targetId} 未找到`);
            return;
        }

        // 生成并插入HTML
        container.innerHTML = this.generateHTML();
        
        // 添加主题类到body
        if (this.config.themeClass) {
            document.body.classList.add(this.config.themeClass);
        }
        
        // 添加自定义类
        if (this.config.customClass) {
            container.classList.add(this.config.customClass);
        }
        
        // 初始化交互功能
        this.initializeInteractions();
        
        this.isInitialized = true;
        
        // 不再自动设置活动状态，改为完全手动控制
        // 这样可以避免与页面级别的 setActiveNavPage 调用产生冲突
    }

    /**
     * 初始化交互功能
     */
    initializeInteractions() {
        this.initMobileMenu();
        // 移除自动页面识别，改为手动控制
        // this.initActivePageHighlight();
        this.initScrollBehavior();
    }

    /**
     * 初始化移动端菜单
     */
    initMobileMenu() {
        const hamburger = document.getElementById('hamburger');
        const navMenu = document.getElementById('navMenu');
        
        if (hamburger && navMenu) {
            hamburger.addEventListener('click', () => {
                hamburger.classList.toggle('active');
                navMenu.classList.toggle('active');
            });

            // 点击菜单项后关闭移动端菜单
            const navLinks = navMenu.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    hamburger.classList.remove('active');
                    navMenu.classList.remove('active');
                });
            });

            // 点击外部区域关闭菜单
            document.addEventListener('click', (e) => {
                if (!hamburger.contains(e.target) && !navMenu.contains(e.target)) {
                    hamburger.classList.remove('active');
                    navMenu.classList.remove('active');
                }
            });
        }
    }

    /**
     * 初始化活动页面高亮
     */
    initActivePageHighlight() {
        // 根据当前页面URL自动设置活动状态
        const currentPage = this.getCurrentPage();
        this.setActivePage(currentPage);
    }

    /**
     * 获取当前页面
     * @returns {string} 当前页面ID
     */
    getCurrentPage() {
        const currentPath = window.location.pathname;
        const filename = currentPath.split('/').pop() || 'index.html';
        
        // 根据文件名匹配页面ID
        const pageMap = {
            'index.html': 'home',
            'about.html': 'about',
            'explore.html': 'explore',
            'heritage.html': 'heritage',
            'longzhou.html': 'heritage', // longzhou页面归属于传习非遗
            'profile.html': 'profile',
            'test-ai-chat.html': 'home' // 测试页面默认为首页
        };
        
        return pageMap[filename] || 'home';
    }

    /**
     * 设置活动页面
     * @param {string} pageId - 页面ID
     */
    setActivePage(pageId) {
        if (!this.isInitialized) {
            this.config.activePage = pageId;
            return;
        }

        // 移除所有活动状态
        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach(link => link.classList.remove('active'));
        
        // 设置新的活动状态
        const targetItem = this.config.menuItems.find(item => item.id === pageId);
        if (targetItem) {
            let targetLink = null;
            
            // 方法1: 通过菜单项名称查找（最可靠）
            navLinks.forEach(link => {
                if (link.textContent.trim() === targetItem.name) {
                    targetLink = link;
                }
            });
            
            // 方法2: 通过href属性查找
            if (!targetLink) {
                targetLink = document.querySelector(`a[href="${targetItem.link}"]`);
            }
            
            // 方法3: 通过nav-link类和href模糊匹配
            if (!targetLink) {
                targetLink = Array.from(navLinks).find(link => {
                    const href = link.getAttribute('href');
                    return href === targetItem.link || href.endsWith('/' + targetItem.link);
                });
            }
            
            if (targetLink) {
                targetLink.classList.add('active');
                // 静默模式，不输出调试信息
            } else {
                // 只在开发模式下输出警告
                if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
                    console.warn(`未找到目标链接: ${targetItem.link}, 页面ID: ${pageId}`);
                }
            }
        } else {
            // 只在开发模式下输出警告
            if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
                console.warn(`未找到页面配置: ${pageId}`);
            }
        }
        
        this.config.activePage = pageId;
    }

    /**
     * 初始化滚动行为
     */
    initScrollBehavior() {
        let lastScrollTop = 0;
        const header = document.querySelector('.main-header');
        
        if (!header) return;

        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            
            // 向下滚动时隐藏导航栏，向上滚动时显示
            if (scrollTop > lastScrollTop && scrollTop > 100) {
                header.style.transform = 'translateY(-100%)';
            } else {
                header.style.transform = 'translateY(0)';
            }
            
            lastScrollTop = scrollTop;
        });
    }

    /**
     * 更新菜单项
     * @param {Array} newMenuItems - 新的菜单项数组
     */
    updateMenuItems(newMenuItems) {
        this.config.menuItems = newMenuItems;
        if (this.isInitialized) {
            this.render();
        }
    }

    /**
     * 添加菜单项
     * @param {Object} menuItem - 菜单项对象
     * @param {number} position - 插入位置（可选）
     */
    addMenuItem(menuItem, position = null) {
        if (position !== null && position >= 0) {
            this.config.menuItems.splice(position, 0, menuItem);
        } else {
            this.config.menuItems.push(menuItem);
        }
        
        if (this.isInitialized) {
            this.render();
        }
    }

    /**
     * 移除菜单项
     * @param {string} itemId - 菜单项ID
     */
    removeMenuItem(itemId) {
        this.config.menuItems = this.config.menuItems.filter(item => item.id !== itemId);
        if (this.isInitialized) {
            this.render();
        }
    }

    /**
     * 设置网站名称
     * @param {string} name - 网站名称
     */
    setSiteName(name) {
        this.config.siteName = name;
        if (this.isInitialized) {
            const logoText = document.querySelector('.logo span');
            if (logoText) {
                logoText.textContent = name;
            }
        }
    }

    /**
     * 设置Logo图标
     * @param {string} iconClass - 图标类名
     */
    setLogoIcon(iconClass) {
        this.config.logoIcon = iconClass;
        if (this.isInitialized) {
            const logoIcon = document.querySelector('.logo i');
            if (logoIcon) {
                logoIcon.className = iconClass;
            }
        }
    }

    /**
     * 设置Logo图片
     * @param {string} imagePath - 图片路径
     */
    setLogoImage(imagePath) {
        this.config.logoImage = imagePath;
        if (this.isInitialized) {
            const logoImage = document.querySelector('.logo-image');
            if (logoImage) {
                logoImage.src = imagePath;
                logoImage.style.display = 'inline-block';
                // 隐藏备用图标
                const logoIcon = document.querySelector('.logo i');
                if (logoIcon) {
                    logoIcon.style.display = 'none';
                }
            }
        }
    }

    /**
     * 销毁组件
     */
    destroy() {
        const container = document.getElementById(this.config.containerId);
        if (container) {
            container.innerHTML = '';
        }
        
        // 移除事件监听器
        const hamburger = document.getElementById('hamburger');
        if (hamburger) {
            hamburger.replaceWith(hamburger.cloneNode(true));
        }
        
        this.isInitialized = false;
    }
}

/**
 * 全局导航栏管理器
 * 提供简化的API接口
 */
class NavbarManager {
    constructor() {
        this.instance = null;
    }

    /**
     * 初始化导航栏
     * @param {Object} options - 配置选项
     * @returns {NavbarComponent} 导航栏组件实例
     */
    init(options = {}) {
        if (this.instance) {
            this.instance.destroy();
        }
        
        this.instance = new NavbarComponent(options);
        return this.instance;
    }

    /**
     * 渲染导航栏
     * @param {string} containerId - 容器ID
     */
    render(containerId = 'navbar-container') {
        if (!this.instance) {
            this.init();
        }
        
        this.instance.render(containerId);
    }

    /**
     * 快速设置活动页面
     * @param {string} pageId - 页面ID
     */
    setActivePage(pageId) {
        if (this.instance) {
            this.instance.setActivePage(pageId);
        }
    }

    /**
     * 获取当前实例
     * @returns {NavbarComponent|null}
     */
    getInstance() {
        return this.instance;
    }
}

// 创建全局实例
const navbarManager = new NavbarManager();

// 简化API函数
/**
 * 初始化并渲染导航栏（简化版API）
 * @param {Object} options - 配置选项
 */
function initNavbar(options = {}) {
    // 确保DOM加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            navbarManager.init(options);
            navbarManager.render();
        });
    } else {
        navbarManager.init(options);
        navbarManager.render();
    }
}

/**
 * 设置当前活动页面（简化版API）
 * @param {string} pageIdOrFilename - 页面ID或文件名
 */
function setActiveNavPage(pageIdOrFilename) {
    // 如果传入的是文件名，转换为页面ID
    let pageId = pageIdOrFilename;
    
    // 文件名到页面ID的映射
    const fileToPageMap = {
        'index.html': 'home',
        'about.html': 'about', 
        'explore.html': 'explore',
        'heritage.html': 'heritage',
        'longzhou.html': 'heritage', // longzhou页面归属于传习非遗
        'profile.html': 'profile',
        'test-ai-chat.html': 'home' // 测试页面默认为首页
    };
    
    // 如果传入的是文件名，进行转换
    if (pageIdOrFilename.includes('.html')) {
        pageId = fileToPageMap[pageIdOrFilename] || 'home';
    }
    
    // 确保组件已初始化后再设置活动状态
    const setActive = () => {
        const instance = navbarManager.getInstance();
        if (instance && instance.isInitialized) {
            navbarManager.setActivePage(pageId);
        } else {
            // 如果组件还未初始化，等待一下再尝试（最多等待2秒）
            const maxRetries = 40; // 2秒 / 50毫秒
            let retryCount = 0;
            
            const retry = () => {
                const instance = navbarManager.getInstance();
                if (instance && instance.isInitialized) {
                    navbarManager.setActivePage(pageId);
                } else if (retryCount < maxRetries) {
                    retryCount++;
                    setTimeout(retry, 50);
                }
            };
            
            setTimeout(retry, 10); // 减少初始延迟
        }
    };
    
    setActive();
}

// 导出（兼容不同模块系统）
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        NavbarComponent,
        NavbarManager,
        navbarManager,
        initNavbar,
        setActiveNavPage
    };
} else {
    // 浏览器环境
    window.NavbarComponent = NavbarComponent;
    window.NavbarManager = NavbarManager;
    window.navbarManager = navbarManager;
    window.initNavbar = initNavbar;
    window.setActiveNavPage = setActiveNavPage;
} 